<template>
    <div class="date-picker" :class="{ 'disabled-picker': props.disabled || props.readonly }">
        <mrc_ess_Popover ref="mrcEssPopover" :disabled="props.disabled || props.readonly">
            <template v-slot:btn>
                <div>
                    <slot name="btn">
                        <div class="flex align-center">
                            <svg-icon :iconClass="props.icon" :size="props.iconSize"></svg-icon>
                            <span class="ml-2 text-text--primary" v-if="props.label">{{ props.label }}</span>
                            <span class="ml-2 text-text--primary" v-if="props.isShowValue == true">{{ dateText ||
                                placeholder }}</span>
                        </div>
                    </slot>
                </div>
            </template>
            <template v-slot:default>
                <v-card>
                    <v-date-picker :disabled="props.disabled || props.readonly" v-model="date" :min="min" :max="max"
                        color="primary" landscape event-color="#fb8c00" header-color="#fb8c00" no-title show-current
                        :allowed-dates="allowedDate" type="date"></v-date-picker>
                </v-card>
            </template>
        </mrc_ess_Popover>
    </div>
</template>

<script lang="ts" setup>
import moment from "moment";
import { ref, watch } from 'vue';
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
    modelValue: {
        type: [Number, String],
        default: ""
    },
    // 不允许选择的日期
    notAllowedDates: {
        type: Array<string | number>,
        default: []
    },
    //只能选择今天或者今天之后
    afterDate: {
        type: Boolean,
        default: false,
    },
    // 日期格式
    format: {
        type: String,
        default: "YYYY-MM-DD",
    },
    // 最小日期
    min: {
        type: [String, Date],
        default: "",
    },
    // 最大日期
    max: {
        type: [String, Date],
        default: ""
    },
    // 是否禁用
    disabled: {
        type: Boolean,
        default: false,
    },
    // 是否只读
    readonly: {
        type: Boolean,
        default: false,
    },
    // 标签文字
    label: {
        type: String,
        default: "Period:"
    },
    // 占位文字
    placeholder: {
        type: String,
        default: "YYYY/MM/DD-YYY/MM/DD"
    },
    // 图标大小
    iconSize: {
        type: [Number, String],
        default: "16"
    },
    // 图标
    icon: {
        type: String,
        default: "calendar_today"
    },
    // 是否回显值
    isShowValue: {
        type: Boolean,
        default: true
    }
})

const date = ref(props.modelValue ? new Date(props.modelValue) : null);
const dateText = ref();
const mrcEssPopover = ref();

/**
 * 关闭对话框
 */
function close() {
    mrcEssPopover.value.close();
}
/**
 * 显示对话框
 */
function open() {
    mrcEssPopover.value.open();
}
defineExpose({
    close,
    open
})

watch(date, (value) => {
    emit("update:modelValue", formatDate(value));
    dateText.value = formatDate(value);
    mrcEssPopover && mrcEssPopover.value && mrcEssPopover.value.close();
})

watch(() => props.modelValue, (value) => {
    date.value = props.modelValue ? new Date(props.modelValue) : null;
    if (value) dateText.value = formatDate(new Date(value));
}, {
    immediate: true
})

/**
 * 日期格式化
 * @param date 
 */
function formatDate(date: any) {
    if (!date) return null;
    return moment(date).format(props.format);
}

/**
 * 允许展示的日期
 * @param val 
 */
function allowedDate(val: Date) {
    if (props.afterDate) {
        const date = new Date();
        let year = date.getFullYear(); // 获取完整的年份(4位,1970)
        let mon = date.getMonth() + 1; // 获取月份(0-11,0代表1月,用的时候记得加上1)
        let da = date.getDate(); // 获取日(1-31)
        return (
            new Date(val).valueOf() >=
            new Date(year + "/" + mon + "/" + da).valueOf()
        );
    } else {
        if (Array.isArray(props.notAllowedDates)) {
            let isno = props.notAllowedDates.some((item1) => {
                return new Date(val).valueOf() == new Date(item1).valueOf();
            });
            if (!isno) return val;
        } else {
            return val;
        }
    }
}

</script>

<style scoped>
.disabled-picker {
    cursor: default;
}
</style>